<template>
  <div class="execution">
    <basic-container>
      <div class="sw-revenue-daily-report">
        <el-form :inline="true">
          <el-form-item label="盘点日期">
            <span v-if="readonly">{{ reportData.statisticsDate | formatDate }}</span>
            <el-date-picker
              v-else
              v-model="initialStatisticsDate"
              type="month"
              value-format="yyyy-MM"
              placeholder="选择日期"
              @change="statisticsDateSelect"
            >
            </el-date-picker>
          </el-form-item>
          <table class="el-table el-table--border">
            <tr>
              <td class="bold center">账面结余金额(元)</td>
              <td colspan="6" class="center">
                <span v-if="readonly">{{ reportData.bookBalanceMoney.toFixed(2) }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.bookBalanceMoney"
                  :step="0"
                  :precision="2"
                  :controls="false"
                  @change="handleBookBalanceMoneyChange($event)"
                />
              </td>
            </tr>
            <tr>
              <td rowspan="14" class="bold center" width="22%">
                实<br /><br /><br />际<br /><br /><br />盘<br /><br /><br />点<br /><br /><br />记<br /><br /><br />录
              </td>
              <td colspan="2" class="bold center" width="26%">面额</td>
              <td colspan="2" class="bold center" width="26%">张/枚数</td>
              <td class="bold center" width="26%">金额(元)</td>
            </tr>
            <tr>
              <td colspan="2" class="bold center">100 元</td>
              <td colspan="2">
                <span v-if="readonly">{{ reportData.hundredNumber }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.hundredNumber"
                  :controls="false"
                  @change="handleChange($event, 100, 'hundredMoney')"
                />
              </td>
              <td>
                <span v-if="readonly">{{ reportData.hundredMoney.toFixed(2) }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.hundredMoney"
                  :step="0"
                  :precision="2"
                  :controls="false"
                  :disabled="true"
                />
              </td>
            </tr>
            <tr>
              <td colspan="2" class="bold center">50 元</td>
              <td colspan="2">
                <span v-if="readonly">{{ reportData.fiftiyNumber }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.fiftiyNumber"
                  :controls="false"
                  @change="handleChange($event, 50, 'fiftiyMoney')"
                />
              </td>
              <td>
                <span v-if="readonly">{{ reportData.fiftiyMoney.toFixed(2) }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.fiftiyMoney"
                  :step="0"
                  :precision="2"
                  :controls="false"
                  :disabled="true"
                />
              </td>
            </tr>
            <tr>
              <td colspan="2" class="bold center">20 元</td>
              <td colspan="2">
                <span v-if="readonly">{{ reportData.twentyNumber }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.twentyNumber"
                  :controls="false"
                  @change="handleChange($event, 20, 'twentyMoney')"
                />
              </td>
              <td>
                <span v-if="readonly">{{ reportData.twentyMoney.toFixed(2) }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.twentyMoney"
                  :step="0"
                  :precision="2"
                  :controls="false"
                  :disabled="true"
                />
              </td>
            </tr>
            <tr>
              <td colspan="2" class="bold center">10 元</td>
              <td colspan="2">
                <span v-if="readonly">{{ reportData.tenNumber }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.tenNumber"
                  :controls="false"
                  @change="handleChange($event, 10, 'tenMoney')"
                />
              </td>
              <td>
                <span v-if="readonly">{{ reportData.tenMoney.toFixed(2) }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.tenMoney"
                  :step="0"
                  :precision="2"
                  :controls="false"
                  :disabled="true"
                />
              </td>
            </tr>
            <tr>
              <td colspan="2" class="bold center">5 元</td>
              <td colspan="2">
                <span v-if="readonly">{{ reportData.fiveNumber }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.fiveNumber"
                  :controls="false"
                  @change="handleChange($event, 5, 'fiveMoney')"
                />
              </td>
              <td>
                <span v-if="readonly">{{ reportData.fiveMoney.toFixed(2) }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.fiveMoney"
                  :step="0"
                  :precision="2"
                  :controls="false"
                  :disabled="true"
                />
              </td>
            </tr>
            <tr>
              <td rowspan="2" class="bold center" width="10%">1<br />元</td>
              <td class="bold center">纸币</td>
              <td colspan="2">
                <span v-if="readonly">{{ reportData.onePaperNumber }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.onePaperNumber"
                  :controls="false"
                  @change="handleChange($event, 1, 'onePaperMoney')"
                />
              </td>
              <td>
                <span v-if="readonly">{{ reportData.onePaperMoney.toFixed(2) }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.onePaperMoney"
                  :step="0"
                  :precision="2"
                  :controls="false"
                  :disabled="true"
                />
              </td>
            </tr>
            <tr>
              <td class="bold center">硬币</td>
              <td colspan="2">
                <span v-if="readonly">{{ reportData.oneCoinNumber }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.oneCoinNumber"
                  :controls="false"
                  @change="handleChange($event, 1, 'oneCoinMoney')"
                />
              </td>
              <td>
                <span v-if="readonly">{{ reportData.oneCoinMoney.toFixed(2) }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.oneCoinMoney"
                  :step="0"
                  :precision="2"
                  :controls="false"
                  :disabled="true"
                />
              </td>
            </tr>
            <tr>
              <td rowspan="2" class="bold center" width="10%">5<br />角</td>
              <td class="bold center">纸币</td>
              <td colspan="2">
                <span v-if="readonly">{{ reportData.fivecentsPaperNumber }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.fivecentsPaperNumber"
                  :controls="false"
                  @change="handleChange($event, 0.5, 'fivecentsPaperMoney')"
                />
              </td>
              <td>
                <span v-if="readonly">{{ reportData.fivecentsPaperMoney.toFixed(2) }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.fivecentsPaperMoney"
                  :step="0"
                  :precision="2"
                  :controls="false"
                  :disabled="true"
                />
              </td>
            </tr>
            <tr>
              <td class="bold center">硬币</td>
              <td colspan="2">
                <span v-if="readonly">{{ reportData.fivecentsCoinNumber }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.fivecentsCoinNumber"
                  :controls="false"
                  @change="handleChange($event, 0.5, 'fivecentsCoinMoney')"
                />
              </td>
              <td>
                <span v-if="readonly">{{ reportData.fivecentsCoinMoney.toFixed(2) }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.fivecentsCoinMoney"
                  :step="0"
                  :precision="2"
                  :controls="false"
                  :disabled="true"
                />
              </td>
            </tr>
            <tr>
              <td class="bold center" width="10%">2 角</td>
              <td class="bold center">纸币</td>
              <td colspan="2">
                <span v-if="readonly">{{ reportData.twocentsPaperNumber }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.twocentsPaperNumber"
                  :controls="false"
                  @change="handleChange($event, 0.2, 'twocentsPaperMoney')"
                />
              </td>
              <td>
                <span v-if="readonly">{{ reportData.twocentsPaperMoney.toFixed(2) }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.twocentsPaperMoney"
                  :step="0"
                  :precision="2"
                  :controls="false"
                  :disabled="true"
                />
              </td>
            </tr>
            <tr>
              <td rowspan="2" class="bold center" width="10%">1<br />角</td>
              <td class="bold center">纸币</td>
              <td colspan="2">
                <span v-if="readonly">{{ reportData.onecentsPaperNumber }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.onecentsPaperNumber"
                  :controls="false"
                  @change="handleChange($event, 0.1, 'onecentsPaperMoney')"
                />
              </td>
              <td>
                <span v-if="readonly">{{ reportData.onecentsPaperMoney.toFixed(2) }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.onecentsPaperMoney"
                  :step="0"
                  :precision="2"
                  :controls="false"
                  :disabled="true"
                />
              </td>
            </tr>
            <tr>
              <td class="bold center">硬币</td>
              <td colspan="2">
                <span v-if="readonly">{{ reportData.onecentsCoinNumber }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.onecentsCoinNumber"
                  :controls="false"
                  @change="handleChange($event, 0.1, 'onecentsCoinMoney')"
                />
              </td>
              <td>
                <span v-if="readonly">{{ reportData.onecentsCoinMoney.toFixed(2) }}</span>
                <el-input-number
                  v-else
                  class="input-number"
                  v-model="reportData.onecentsCoinMoney"
                  :step="0"
                  :precision="2"
                  :controls="false"
                  :disabled="true"
                />
              </td>
            </tr>
            <tr>
              <td colspan="2" class="bold center" height="60">
                实存现金合计(元)
              </td>
              <td colspan="3" class="center">
                {{ reportData.actualBookBalanceMoney.toFixed(2) }}
              </td>
            </tr>
            <tr>
              <td class="bold center" height="60">差异金额(元)</td>
              <td colspan="5" class="center">
                {{ reportData.diffBookBalanceMoney.toFixed(2) }}
              </td>
            </tr>
            <tr>
              <td class="bold center">差异原因</td>
              <td colspan="5" class="center" height="60">
                <span v-if="readonly">{{ reportData.diffReason }}</span>
                <el-input
                  v-else
                  type="textarea"
                  v-model="reportData.diffReason"
                  placeholder="请输入差异原因"
                  :disabled="readonly"
                />
              </td>
            </tr>
            <tr>
              <td class="bold center">盘点人</td>
              <td colspan="2" class="center" height="60">
                <span v-if="readonly">{{ reportData.checkPersonName }}</span>
                <el-select
                  v-else
                  v-model="reportData.checkPersonName"
                  placeholder=""
                  style="width: 100%"
                  @change="changeCheckPersonName"
                  clearable
                  filterable
                  allow-create
                  :disabled="readonly"
                >
                  <el-option
                    v-for="(item, index) in userNames"
                    :key="index"
                    :label="item.nikename"
                    :value="item.nikename"
                  >
                  </el-option>
                </el-select>
              </td>
              <td colspan="2" class="bold center">盘点人工号</td>
              <td class="center" height="60">
                <span v-if="readonly">{{ reportData.checkPersonJobNo }}</span>
                <el-select
                  v-else
                  v-model="reportData.checkPersonJobNo"
                  placeholder=""
                  style="width: 100%"
                  clearable
                  filterable
                  allow-create
                  :disabled="readonly"
                >
                  <el-option
                    v-for="(item, index) in userJobNos"
                    :key="index"
                    :label="item.userCode"
                    :value="item.userCode"
                  >
                  </el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td class="bold center">复核人</td>
              <td colspan="2" class="center" height="60">
                <span v-if="readonly">{{ reportData.attendName }}</span>
                <el-select
                  v-else
                  v-model="reportData.attendName"
                  placeholder=""
                  style="width: 100%"
                  @change="changeAttendName"
                  clearable
                  filterable
                  allow-create
                  :disabled="readonly"
                >
                  <el-option
                    v-for="(item, index) in userNames"
                    :key="index"
                    :label="item.nikename"
                    :value="item.nikename"
                  >
                  </el-option>
                </el-select>
              </td>
              <td colspan="2" class="bold center">复核人工号</td>
              <td class="center" height="60">
                <span v-if="readonly">{{ reportData.attendJobNo }}</span>
                <el-select
                  v-else
                  v-model="reportData.attendJobNo"
                  placeholder=""
                  style="width: 100%"
                  clearable
                  filterable
                  allow-create
                  :disabled="readonly"
                >
                  <el-option
                    v-for="(item, index) in userJobNos"
                    :key="index"
                    :label="item.userCode"
                    :value="item.userCode"
                  >
                  </el-option>
                </el-select>
              </td>
            </tr>
          </table>
          <div class="submit-content">
            <el-button v-if="!readonly" type="primary" size="small" @click="saveOrUpdate">保存</el-button>
            <el-button size="small" @click="handleCancel">取消</el-button>
          </div>
        </el-form>
      </div>
    </basic-container>
  </div>
</template>

<script>
import { dateFormat } from "@/util/date";
import { getSysUserToRevenue } from "@/api/admin/user";
import { saveOrUpdate, getPettymoneyCheck, getPettymoneyCheckEdit,getTypeValue } from "@/api/subwaystm/swstpettymoneycheck";

export default {
  name: "pettymoneyCheckAdd",
  props: {
    reportData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    operationType: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      dateFormat: dateFormat,
      initialStatisticsDate: '',
      checkDay: '25',
      userNames: [],
      userJobNos: []
    };
  },
  created() {
    this.getPassenger();
    getTypeValue('pettymoney_check_day').then(response => {
      this.checkDay = response.data.data[0].value;
	  });
  },
  mounted () {
    if(this.operationType == 'add'){
      let now = new Date();
      let day = now.getDate();
      let hours = now.getHours();
      if (day==1 && hours < 6) {
        now.setDate((now.getDate() - 1));
      }
       this.initialStatisticsDate = now;
       this.statisticsDateSelect(dateFormat(this.initialStatisticsDate).substr(0, 7));
    }else if(this.operationType == 'edit'){
      this.initialStatisticsDate = dateFormat(new Date(this.reportData.statisticsDate)).substr(0, 7);
    }
  },
  computed: {
    readonly(){
      return this.operationType === 'view';
    }
  },
  filters: {
    formatDate(value) {
      if (!value) return '';
      // 格式化日期
      return dateFormat(new Date(value)).substr(0, 7);
    }
  },
  methods: {
    // 张数改变计算合计和差异金额
    handleChange(value, amount, field) {
      if (!isNaN(value)) {
        this.reportData[field] = value * amount;
        this.reportData.actualBookBalanceMoney =
          this.reportData.hundredMoney +
          this.reportData.fiftiyMoney +
          this.reportData.twentyMoney +
          this.reportData.tenMoney +
          this.reportData.fiveMoney +
          this.reportData.onePaperMoney +
          this.reportData.oneCoinMoney +
          this.reportData.fivecentsPaperMoney +
          this.reportData.fivecentsCoinMoney +
          this.reportData.twocentsPaperMoney +
          this.reportData.onecentsPaperMoney +
          this.reportData.onecentsCoinMoney;
        this.reportData.diffBookBalanceMoney = this.reportData.actualBookBalanceMoney - this.reportData.bookBalanceMoney;
      }
    },
    // 账面结余金额改变计算差异金额
    handleBookBalanceMoneyChange(value) {
        this.reportData.diffBookBalanceMoney = this.reportData.actualBookBalanceMoney - value;
    },
    // 设置盘点日期（yyyy-mm-dd）
    statisticsDateSelect(val) {
      this.reportData.statisticsDate = val + '-' + this.checkDay;
    },
    // 检查本月备用金盘点数据是否存在
    async getPettymoneyCheck(){
      let checkData = {};
      await getPettymoneyCheck(this.reportData.statisticsDate)
        .then(response => {
          checkData = response.data.data;
        })
      return checkData;
    },
   // 检查本月备用金盘点数据是否存在
   async getPettymoneyCheckEdit(){
      let checkData = {};
      await getPettymoneyCheckEdit(this.reportData.id,this.reportData.statisticsDate)
        .then(response => {
          checkData = response.data.data;
        })
      return checkData;
    },
    // 保存
    async saveOrUpdate() {
      if (this.validatenull(this.reportData.statisticsDate)) {
        this.$message.error("盘点日期不能为空！");
        return false;
      }
      if (this.operationType === 'add') {
        const checkData = await this.getPettymoneyCheck();
        if(!this.validatenull(checkData)){
          this.$message.error("本月备用金盘点数据已存在，请勿重复录入！");
          return false;
        }
      }
      if (this.operationType === 'edit') {
        const checkData = await this.getPettymoneyCheckEdit();
        if(!this.validatenull(checkData)){
          this.$message.error("本月备用金盘点数据已存在，请勿重复录入！");
          return false;
        }
      }
      if (!this.reportData.bookBalanceMoney) {
        this.$message.error("请填写账面结余金额！");
        return false;
      }
      if (this.validatenull(this.reportData.checkPersonJobNo) || this.validatenull(this.reportData.attendJobNo)) {
        this.$message.error("请选择盘点人和复核人！");
        return false;
      }
      this.$confirm("确认要保存吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        saveOrUpdate(this.reportData)
          .then((data) => {
            this.$message.success("保存成功");
            this.handleCancel();
          })
          .catch(() => {
            this.$message.error("保存失败！");
          });
      });
    },
    // 取消
    handleCancel() {
      this.$emit('closed');
    },
    // 获取车站人员
    getPassenger() {
      getSysUserToRevenue().then((response) => {
        this.userNames = response.data.data;
        this.userJobNos = response.data.data;
      });
    },
    // 盘点人选择
    changeCheckPersonName(data) {
      var objVal = {};
      this.userJobNos.forEach((val) => {
        if (val.nikename == data) {
          objVal = val;
        }
      });
      this.reportData.checkPersonJobNo = objVal.userCode;
    },
    // 复核人选择
    changeAttendName(data) {
      var objVal = {};
      this.userJobNos.forEach((val) => {
        if (val.nikename == data) {
          objVal = val;
        }
      });
      this.reportData.attendJobNo = objVal.userCode;
    },
  },
};
</script>
<style lang="scss" scoped>
.sw-revenue-daily-report {
  .input-number {
    width: 100%;
  }
  table {
    border: #b7babf solid 1px;
    border-top: none;
    width: 100% !important;
    td {
      padding: 12px 10px;
      border: #b7babf solid 1px;
    }
  }
  .center {
    text-align: center;
  }
  .bold {
    font-weight: bold;
  }
  .submit-content {
    padding-top: 30px;
    text-align: center;
  }
}
</style>
